﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Expires" content="86400" />
    <meta name="viewport" content="width=device-width, height=device-height" />
    <title>Data Binding Sample</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="http://storage.saka-pon.net/Contents/Scripts/KLibrary-1.1.93.min.js" type="text/javascript"></script>
    <link href="../Resources/Styles/DataBinding.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="page">
        <h1>Data Binding Sample</h1>
        <!--[if lt IE 9]>
        <div>Internet Explorer 9 以上でご覧ください。</div>
        <![endif]-->
        <div class="times" data-context="appModel"></div>
        <script type="text/plain">
            <div>
                <h3>現在の日付・時刻</h3>
                <p>${now:M/d H:mm:ss}</p>
            </div>
            <div>
                <h3>2012/12/25 まで</h3>
                <p>${now>toTimeLeft:N0} 秒</p>
            </div>
        </script>
    </div>
    <script type="text/javascript">
        //<![CDATA[
        var xDay = new Date(2012, 11, 25);
        function toTimeLeft(x) { return Math.ceil((xDay.getTime() - x.getTime()) / 1000); }

        var appModel = { now: new Date() };

        $(function () {
            $(document).bindData();

            setInterval(function () {
                appModel.now = new Date();
            }, 1000);
        });
        //]]>
    </script>
</body>
</html>
